<template id="cardForm">
  <form>
    <UsernameInput placeholder="请输入用户名" v-model="username" />
    <PasswordInput placeholder="请输入密码" v-model="password" :key="dataKey"/>
    <SubmitButton
      :text="btnText"
      :disabled="isDisabledSubmit"
      @click="$emit('click',username,password)"/>
  </form>
</template>

<script>
import UsernameInput from "./UsernameInput";
import PasswordInput from "./PasswordInput";
import SubmitButton from "./SubmitButton";

export default {
  name: "CardForm",
  components: {
    UsernameInput,
    PasswordInput,
    SubmitButton
  },
  props: {
    btnText: {
      default: "按 钮"
    },
    dataKey: {
      default: ""
    }
  },
  data: function() {
    return {
      username: "",
      password: ""
    };
  },
  computed: {
    isDisabledSubmit: function() {
      return this.username.length == 0 || this.password.length == 0;
    }
  }
};
</script>